<template>
  <div>
    <filter-panel
      @create="handleCreate"
      ref="filter"
    />
    <exercise-list @modify="handleModify" />
    <el-dialog
      :title="editorTitle"
      :visible.sync="editorVisible"
      destroy-on-close
      center
      :width="dialogWidth"
    >
      <form-view
        ref="editor"
        @close="editorVisible=false"
        @update="$refs.filter.updateData()"
      />
    </el-dialog>
  </div>
</template>

<script>
  import formView from "./formView.vue";
  import exerciseList from "./exerciseList.vue";
  import filterPanel from "./filterPanel.vue";
  export default {
    name: 'exerciseManageView',
    components: {
      filterPanel,
      exerciseList,
      formView,
    },
    computed: {
      dialogWidth() { return this.$store.getters.dialogWidth },
    },
    data() {
      return {
        loading: false,
        tableKey: 0,
        tableVisible: true,
        editorVisible: false,
        editorTitle: "",
      }
    },
    methods: {
      handleCreate() {
        this.editorTitle = "新建练习模板";
        this.editorVisible = true;
        this.$nextTick(() => { this.$refs.editor.openWithCreate() });
      },
      handleModify(row) {
        this.editorTitle = "修改练习模板";
        this.editorVisible = true;
        this.$nextTick(() => { this.$refs.editor.openWithModify(JSON.parse(JSON.stringify(row))); });
      },
    },
  }
</script>